import { Avatar, Card, Col, Row, Skeleton } from 'antd'
import React, { useEffect, useState } from 'react'
import { history, Link } from 'umi'
import { PageContainer } from '@ant-design/pro-layout'
import styles from './style.less'
import { getIndexData } from '@/services'
import { Line, Pie } from '@ant-design/charts'
import ProCard, { StatisticCard } from '@ant-design/pro-card'
import GetTime from '@/components/GetTime'
import Animation from '@/components/Animation'

export default () => {
  const [adminInfo, setAdminInfo] = useState(undefined)
  const [exam, setExam] = useState(undefined)
  const [data, setData] = useState([])
  const [loading, setLoading] = useState(true)

  const projectNotice = [
    { href: '/exam/examlist', title: '考试安排', description: '开始安排或者修改一场考试', user: 'Hearion' },
    { href: '/exam/testList', title: '试卷列表', description: '添加或者修改试卷数据', user: 'Hearion' },
    { href: '/exam/question', title: '题库管理', description: '添加或者修改试题数据', user: 'Hearion' },
    { href: '/usermanage/person', title: '用户管理', description: '管理用户', user: 'Hearion' },
    { href: '/', title: '考试监控', description: '对一场考试进行监控操作', user: 'Hearion' },
    { href: '/', title: '人工评卷', description: '对一场考试进行阅卷', user: 'Hearion' },
  ]

  useEffect(async () => {
    await getIndex()

    await asyncFetch()
  }, [])

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log('fetch data failed', error)
      })
  }

  const config = {
    data: data,
    xField: 'year',
    yField: 'gdp',
    seriesField: 'name',
    yAxis: {
      label: {
        formatter: function formatter (v) {
          return ''.concat((v / 1000000000).toFixed(1), ' B')
        },
      },
    },
    legend: { position: 'top' },
    smooth: true,
    animation: {
      appear: {
        animation: 'path-in',
        duration: 5000,
      },
    },
  }

  const getIndex = async () => {
    await getIndexData().then((res) => {
      setExam([
        { title: '未开始', num: res.noStart },
        { title: '进行中', num: res.examIng },
        { title: '已结束', num: res.examOver }
      ])

      setAdminInfo(res.userInfo)
      setLoading(false)
    })
  }

  const pie = [
    {
      type: '科目分类',
      value: 27,
    },
    {
      type: '考试分类',
      value: 25,
    },
    {
      type: '试卷分类',
      value: 18,
    },
    {
      type: '题目分类',
      value: 15,
    },
    {
      type: '菜单',
      value: 10,
    },
  ]
  const configPie = {
    appendPadding: 10,
    data: pie,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name} {percentage}',
    },
    interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
  }

  return (
    <PageContainer header={{
      extra: [
        <GetTime key="getTime"/>
      ]
    }} loading={loading}>
      {
        !adminInfo ? <Card style={{ marginBottom: 28 }}>
            <div style={{ padding: 20 }}><Skeleton paragraph={{ rows: 2 }}/></div>
          </Card> :
          <Card style={{ marginBottom: 28 }}>
            <div className={styles.pageHeaderContent}>
              <div className={styles.avatar}>
                {
                  adminInfo.avatar_url ? <Avatar size="large" src={adminInfo.avatar_url}/>
                    : <Avatar size="large" src="https://i.loli.net/2021/04/22/JbDvSFw934i7VXa.jpg"/>
                }
              </div>
              <div className={styles.content}>
                <div className={styles.contentTitle}>
                  {adminInfo.username}，祝你开心每一天！
                </div>
                <div>
                  智校云考试系统
                </div>
              </div>
            </div>
          </Card>
      }
      <Row gutter={24}>
        <Col xl={16} lg={24} md={24} sm={24} xs={24}>
          <Card
            className={styles.projectList}
            style={{ marginBottom: 24 }}
            title="快捷进入"
            bordered={false}
            bodyStyle={{
              padding: 0,
            }}
          >
            {projectNotice.map((item, index) => (
              <Card.Grid className={styles.projectGrid} key={index}>
                <Card bodyStyle={{ padding: 0, }} onClick={() => history.push(item.href)} bordered={false}>
                  <Card.Meta
                    title={
                      <div className={styles.cardTitle}>
                        <Link to={item.href}>{item.title}</Link>
                      </div>
                    }
                    description={item.description}
                  />
                </Card>
              </Card.Grid>
            ))}
          </Card>
        </Col>
        <Col xl={8} lg={24} md={24} sm={24} xs={24}>
          <Card style={{ marginBottom: 24 }}
                title="考试情况"
                bordered={true}
                bodyStyle={{ padding: 0 }}
          >
            {
              !exam ? <div style={{ padding: 20 }}><Skeleton paragraph={{ rows: 2 }}/></div>
                :
                exam.map((item, index) => {
                  return (
                    <Card.Grid className={styles.projectGrid} key={index}>
                      <Card bodyStyle={{ padding: 0 }} bordered={false}>
                        <Card.Meta title={item.title}/>
                        <Animation value={item.num}/>
                      </Card>
                    </Card.Grid>
                  )
                })
            }
          </Card>
        </Col>
      </Row>

      <ProCard split="horizontal" gutter={2} size={'small'} headerBordered={true} ghost={true}>
        <StatisticCard
          bordered={true}
          hoverable
          title="分类占比"
          chart={
            <Pie{...configPie}/>
          }
        />
        <StatisticCard
          hoverable
          title="流量走势"
          chart={
            <Line{...config}/>
          }
        />
      </ProCard>
    </PageContainer>
  )
}
